<header id="header" data-current-skin={{mactrl.currentSkin}} data-ng-include="'template/header.html'" data-ng-controller="headerCtrl as hctrl"></header>

<section id="main">
    <aside id="sidebar" data-ng-include="'template/sidebar-left.html'" data-ng-class="{ 'toggled': mactrl.sidebarToggle.left === true }"></aside>

    <aside id="chat" data-ng-include="'template/chat.html'" data-ng-class="{ 'toggled': mactrl.sidebarToggle.right === true }"></aside>

    <section id="content">
        <div class="container">
            <div class="block-header">
                <h2>Generic Class Reference <small>Following are the custom generic classes available with the template and can be used alongside with any elements. To modify or delete, please refer 'generic.less'</small></h2>

                <ul class="actions">
                    <li>
                        <a href="">
                            <i class="zmdi zmdi-trending-up"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="zmdi zmdi-check-all"></i>
                        </a>
                    </li>
                    <li class="dropdown" uib-dropdown>
                        <a href="" uib-dropdown-toggle>
                            <i class="zmdi zmdi-more-vert"></i>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right">
                            <li>
                                <a href="">Refresh</a>
                            </li>
                            <li>
                                <a href="">Manage Widgets</a>
                            </li>
                            <li>
                                <a href="">Widgets Settings</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <!-- Margin -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Margin <small>eg: <code>&lt;div class="m-10 m-b-0"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <strong class="d-block m-b-10">Margin</strong>

                            <code>.m-0</code>
                            <code>.m-5</code>
                            <code>.m-10</code>
                            <code>.m-15</code>
                            <code>.m-20</code>
                            <code>.m-25</code>

                            <br/>
                            <br/>

                            <strong class="d-block m-b-10">Margin Top</strong>

                            <code>.m-t-0</code>
                            <code>.m-t-5</code>
                            <code>.m-t-10</code>
                            <code>.m-t-15</code>
                            <code>.m-t-20</code>
                            <code>.m-t-25</code>

                            <br/>
                            <br/>

                            <strong class="d-block m-b-10">Margin Right</strong>

                            <code>.m-r-0</code>
                            <code>.m-r-5</code>
                            <code>.m-r-10</code>
                            <code>.m-r-15</code>
                            <code>.m-r-20</code>
                            <code>.m-r-25</code>

                            <br/>
                            <br/>

                            <strong class="d-block m-b-10">Margin Bottom</strong>

                            <code>.m-b-0</code>
                            <code>.m-b-5</code>
                            <code>.m-b-10</code>
                            <code>.m-b-15</code>
                            <code>.m-b-20</code>
                            <code>.m-b-25</code>

                            <br/>
                            <br/>

                            <strong class="d-block m-b-10">Margin Left</strong>

                            <code>.m-l-0</code>
                            <code>.m-l-5</code>
                            <code>.m-l-10</code>
                            <code>.m-l-15</code>
                            <code>.m-l-20</code>
                            <code>.m-l-25</code>
                        </div>
                    </div>

                    <!-- Font Size -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Font Size <small>eg: <code>&lt;div class="f-10"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.f-8</code>
                            <code>.f-9</code>
                            <code>.f-10</code>
                            <code>.f-11</code>
                            <code>.f-12</code>
                            <code>.f-13</code>
                            <code>.f-14</code>
                            <code>.f-15</code>
                            <code>.f-16</code>
                            <code>.f-17</code>
                            <code>.f-18</code>
                            <code>.f-19</code>
                            <code>.f-20</code>
                        </div>
                    </div>

                    <!-- Text Color -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Text Color <small>eg: <code>&lt;div class="c-blue"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <p>To see the color previews, please head on to <a href="colors.html">colors.html</a></p>

                            <code>.c-red</code>
                            <code>.c-pink</code>
                            <code>.c-purple</code>
                            <code>.c-deeppurple</code>
                            <code>.c-indigo</code>
                            <code>.c-blue</code>
                            <code>.c-lightblue</code>
                            <code>.c-cyan</code>
                            <code>.c-teal</code>
                            <code>.c-green</code>
                            <code>.c-lightgreen</code>
                            <code>.c-lime</code>
                            <code>.c-yellow</code>
                            <code>.c-amber</code>
                            <code>.c-orange</code>
                            <code>.c-deeporange</code>
                            <code>.c-brown</code>
                            <code>.c-gray</code>
                            <code>.c-bluegray</code>
                            <code>.c-black</code>
                            <code>.c-white</code>

                            <br/>
                            <br/>

                            <code>.text-muted</code>
                        </div>
                    </div>

                    <!-- Text Align-->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Text Align <small>eg: <code>&lt;div class="text-center"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.text-center</code>
                            <code>.text-right</code>
                            <code>.text-left</code>
                            <code>.text-justify</code>
                        </div>
                    </div>

                    <!-- Position -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Position <small>eg: <code>&lt;div class="p-relative"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.p-relative</code>
                            <code>.p-absolute</code>
                            <code>.p-fixed</code>
                            <code>.p-static</code>
                        </div>
                    </div>

                    <!-- Overflow -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Overflow <small>eg: <code>&lt;div class="o-hidden"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.o-hidden</code>
                            <code>.o-visible</code>
                            <code>.o-auto</code>
                        </div>
                    </div>

                    <!-- Image replacement -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Image replacement <small>eg: <code>&lt;div class="text-hide"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <p>Utilize the <code>.text-hide</code> class or mixin to help replace an element's text content with a background image.</p>
                            <code>.text-hide</code>
                        </div>
                    </div>

                    <!-- Text Transform -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Text Transform <small>eg: <code>&lt;div class="text-uppercase"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.text-uppercase</code>
                            <code>.text-lowercase</code>
                            <code>.text-capitalize</code>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <!-- Padding -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Padding <small>eg: <code>&lt;div class="p-10 p-b-0"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <strong class="d-block m-b-10">Padding</strong>

                            <code>.p-0</code>
                            <code>.p-5</code>
                            <code>.p-10</code>
                            <code>.p-15</code>
                            <code>.p-20</code>
                            <code>.p-25</code>

                            <br/>
                            <br/>

                            <strong class="d-block m-b-10">Padding Top</strong>

                            <code>.p-t-0</code>
                            <code>.p-t-5</code>
                            <code>.p-t-10</code>
                            <code>.p-t-15</code>
                            <code>.p-t-20</code>
                            <code>.p-t-25</code>

                            <br/>
                            <br/>

                            <strong class="d-block m-b-10">Padding Right</strong>

                            <code>.p-r-0</code>
                            <code>.p-r-5</code>
                            <code>.p-r-10</code>
                            <code>.p-r-15</code>
                            <code>.p-r-20</code>
                            <code>.p-r-25</code>

                            <br/>
                            <br/>

                            <strong class="d-block m-b-10">Padding Bottom</strong>

                            <code>.p-b-0</code>
                            <code>.p-b-5</code>
                            <code>.p-b-10</code>
                            <code>.p-b-15</code>
                            <code>.p-b-20</code>
                            <code>.p-b-25</code>

                            <br/>
                            <br/>

                            <strong class="d-block m-b-10">Padding Left</strong>

                            <code>.p-l-0</code>
                            <code>.p-l-5</code>
                            <code>.p-l-10</code>
                            <code>.p-l-15</code>
                            <code>.p-l-20</code>
                            <code>.p-l-25</code>
                        </div>
                    </div>

                    <!-- Background Color -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Background Color <small>eg: <code>&lt;div class="bgm-blue"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <p>To see the color previews, please head on to <a href="colors.html">colors.html</a></p>

                            <code>.bgm-red</code>
                            <code>.bgm-pink</code>
                            <code>.bgm-purple</code>
                            <code>.bgm-deeppurple</code>
                            <code>.bgm-indigo</code>
                            <code>.bgm-blue</code>
                            <code>.bgm-lightblue</code>
                            <code>.bgm-cyan</code>
                            <code>.bgm-teal</code>
                            <code>.bgm-green</code>
                            <code>.bgm-lightgreen</code>
                            <code>.bgm-lime</code>
                            <code>.bgm-yellow</code>
                            <code>.bgm-amber</code>
                            <code>.bgm-orange</code>
                            <code>.bgm-deeporange</code>
                            <code>.bgm-brown</code>
                            <code>.bgm-gray</code>
                            <code>.bgm-bluegray</code>
                            <code>.bgm-black</code>
                            <code>.bgm-white</code>
                        </div>
                    </div>

                    <!-- Font Weight-->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Font Weight <small>eg: <code>&lt;div class="f-500"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.f-300</code>
                            <code>.f-400</code>
                            <code>.f-500</code>
                            <code>.f-700</code>
                        </div>
                    </div>

                    <!-- Border Reset-->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Border Reset <small>eg: <code>&lt;div class="b-0"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.b-0</code>
                        </div>
                    </div>

                    <!-- Float -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Float <small>eg: <code>&lt;div class="pull-right"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.pull-right</code>
                            <code>.pull-left</code>
                        </div>
                    </div>

                    <!-- Width -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Full Width <small>eg: <code>&lt;div class="w-100"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.w-100</code>
                        </div>
                    </div>

                    <!-- Visibility -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Visibility <small>eg: <code>&lt;div class="hidden"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.show</code> - display:block;

                            <br/><br/>

                            <code>.hidden</code> - display:none; visibility:hidden;

                            <br/><br/>

                            <code>.invisible</code> - visibility: hidden;
                        </div>
                    </div>

                    <!-- Border Radius -->
                    <div class="card">
                        <div class="card-header ch-alt">
                            <h2>Border Radius <small>eg: <code>&lt;div class="brd-2"&gt;&lt;div&gt;</code></small></h2>
                        </div>

                        <div class="card-body card-padding">
                            <code>.brd-2</code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>

<footer id="footer" data-ng-include="'template/footer.html'"></footer>
